<template>
    <div class="Table">
        <p>订单列表</p>
        <el-table
            ref="multipleTable"
            :data="arr"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="bianhao" label="订单编号" width="160"></el-table-column>
            <el-table-column prop="weixin" label="用户微信" width="140"></el-table-column>
            <el-table-column prop="shouji" label="会员手机" width="140"></el-table-column>
            <el-table-column label="课堂名称" width="140">
                <template slot-scope="scope">{{ curriculum[scope.row.kecheng] }}</template>
            </el-table-column>
            <el-table-column label="订单金额" width="140">
                <template slot-scope="scope">{{ price[scope.row.jine] }}</template>
            </el-table-column>
            <el-table-column label="订单状态" width="140">
                <template slot-scope="scope">{{ type[scope.row.zhuangtai] }}</template>
            </el-table-column>
            <el-table-column prop="shijian" label="提交时间" width="160"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleEdit(scope.row)">查看</el-button>
                    <el-button @click="handleDelete(scope.row.id)" type>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import eventBus from '@/utils/eventBus.js'
import { deleteorderApi, CatchDeleteHomeApi, typeArr } from '@/api/orderApi.js'
export default {
    props: ["arr"],
    data() {
        return {
            multipleSelection: [],
            type: { //映射对象
                1: '待支付',
                2: '已关闭',
                3: '待确定',
                4: '学习中',
                5: '已完成',
            },
            curriculum: {
                0: 'HTML5大前端',
                1: 'java',
                2: 'python全栈',
                3: 'Go语言开发'
            },
            price: {
                0: '18500',
                1: '20000',
                2: '21300',
                3: '19600'
            }
        }
    },
    mounted() {
        eventBus.$on('deleteArr', this.moreDelete)
        eventBus.$on('types', this.typeList)
        eventBus.$on('resetArr', this.resetList)

    },
    methods: {
        handleEdit(row) {
            //编辑第一步：把当前行数据传递给弹框，打开弹框
            this.$emit('updateOpenDialog', row)
        },

        typeList(id) {
            typeArr({ id: id }).then(res => {
                if (res.code = 200) {
                    this.$emit('resetHome')
                }

            })
        },
        resetList() {
            var id = 0
            typeArr({ id: id }).then(res => {
                if (res.code = 200) {
                    this.$emit('resetHome')
                }

            })
        },
        handleDelete(id) {
            console.log("触发了删除");
            deleteorderApi({ id: id }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.$emit('resetHome')
                }
            })
        },
        moreDelete() {
            var ids = this.multipleSelection.map(item => item.id)
            CatchDeleteHomeApi({ ids: ids }).then(res => {
                if (res.code == 200) {
                    this.$emit("resetHome")
                }
            })
        },


        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
}
</script>

<style lang='less' scoped>
.Table {
    margin-top: 30px;
    background-color: #fff;
    padding-top: 12px;
    width: 100% !important;
}
p {
    font-size: 20px;
    margin: 30px;
}
</style>
<style>
.has-gutter tr th {
    font-size: 16px;
    font-weight: 600;
}
.has-gutter .cell {
    text-align: center !important;
}
</style>